<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useLayoutStore } from '@/stores/useLayout';
import { getRequest } from '@/comm/request'
import Find from "./find.vue"
import { getStyleNumber } from '@/comm/tooler';

const id = ref('')
const title = ref('')
const desc = ref('')
const width = ref(1)
const height = ref(300)
const shadow = ref(false)
const padding = ref(0)
const background = ref(null)

const titleSize = ref(30)
const titleColor = ref('#000')

const descSize = ref(30)
const descColor = ref('#000')


const layoutStore = useLayoutStore()

const onTitleSize = (e: any) => {
  layoutStore.changeTitleStyle({
    fontSize: e + 'px',
  })
}

const onTitleColor = (e: any) => {
  layoutStore.changeTitleStyle({
    color: e,
  })
}

const onDescSize = (e: any) => {
  layoutStore.changeDescStyle({
    fontSize: e + 'px',
  })
}

const onDescColor = (e: any) => {
  layoutStore.changeDescStyle({
    color: e,
  })
}


watch(() => layoutStore.curItem, (item) => {
  console.log("change cur layout", item)
  updateData()
})

onMounted(() => {
  updateData()
})

const updateData = () => {
  console.log("onMounted cur layout", layoutStore.curItem)
  const { style, data, titleStyle, descStyle } = layoutStore.curItem;
  if (style) {
    height.value = getStyleNumber(style.height, 0);
    width.value = getStyleNumber((style.flex + "").split(" ")[0], 1);
    padding.value = getStyleNumber(style.padding, 0);
    shadow.value = style.boxShadow && style.boxShadow != 'none';
    background.value = style.background || null
  }
  if (data) {
    id.value = data.post;
    title.value = data.title;
    desc.value = data.desc;
  }
  if (titleStyle) {
    titleSize.value = getStyleNumber(titleStyle.fontSize, 30);
    titleColor.value = titleStyle.color || '#000000'
  }
  if (descStyle) {
    descSize.value = getStyleNumber(descStyle.fontSize, 30);
    descColor.value = descStyle.color || '#000000'
  }

}

const onWidth = (e: any) => {
  console.log(e, "e")
  layoutStore.changeStyle({
    flex: e + " 0 0"
  })
}

const onHeight = (e: any) => {
  console.log(e, "e")
  if (!e || e == 0) {
    layoutStore.changeStyle({ height: 'auto', flex: '1 0 0' })
  }
  else {
    layoutStore.changeStyle({
      height: e + 'px',
      flex: 'auto'
    })
  }

}

const onBackground = (e: any) => {
  console.log(e)
  layoutStore.changeStyle({ background: e })
}
const onShadow = (e: any) => {
  console.log(e)
  const s = `0px 4px 4px 0px rgba(0, 0, 0, 0.25)`;
  layoutStore.changeStyle({ boxShadow: e ? s : 'none' })
}

const onTitleWord = (e: any) => {
  layoutStore.changeTitleWord(e)
}

const onDescWord = (e: any) => {
  layoutStore.changeDescWord(e)
}

const onPadding = (e: any) => {
  console.log(e)
  layoutStore.changeStyle({ padding: e + "px" })
}


</script>
<template>
  <div class="tip">TEMPLATE</div>
  <!-- <el-input v-model="keyword" style="max-width: 600px" placeholder="Please input" class="input-with-select">
    <template #prepend>
      <el-select v-model="select" placeholder="Select" style="width: 90px">
        <el-option label="id" value="id" />
        <el-option label="title" value="title" />
      </el-select>
    </template>
<template #append>
      <el-button :icon="Search" @click="onSearch" />
    </template>
</el-input> -->
  <Find></Find>
  <div class="n-tip">POST ID:</div>
  <el-input v-model="id" type="text" placeholder="Please input" />
  <div class="n-tip">TITLE:</div>
  <div class="t-all">
    <el-input v-model="title" :rows="2" type="textarea" placeholder="Please input" @change="onTitleWord" />
    <div class="slider-block">
      <span class="sname">SIZE:</span>
      <el-input v-model="titleSize" type="number" @change="onTitleSize" />
    </div>

    <div class="slider-block">
      <span class="sname">COLOR:</span>
      <el-color-picker v-model="titleColor" @change="onTitleColor" />
    </div>
  </div>

  <div class="n-tip">DESCRIPTION:</div>
  <div class="t-all">
    <el-input v-model="desc" :rows="4" type="textarea" placeholder="Please input" @change="onDescWord" />
    <div class="slider-block">
      <span class="sname">SIZE:</span>
      <el-input v-model="descSize" type="number" @change="onDescSize" />
    </div>

    <div class="slider-block">
      <span class="sname">COLOR:</span>
      <el-color-picker v-model="descColor" @change="onDescColor" />
    </div>
  </div>

  <div class="slider-block">
    <span class="sname">WIDTH:</span>
    <el-slider class="bar" :min="1" :max="10" v-model="width" @input="onWidth" />
  </div>
  <div class="slider-block">
    <span class="sname">HEIGHT:</span>
    <el-input class="bar" v-model="height" @change="onHeight" />
  </div>
  <div class="slider-block">
    <span class="sname">SHADOW:</span>
    <el-switch v-model="shadow" class="ml-2" @change="onShadow" />
  </div>

  <div class="slider-block">
    <span class="sname">PADDING:</span>
    <el-input class="bar" v-model="padding" type="number" @change="onPadding" />
  </div>

  <div class="slider-block">
    <span class="sname">COLOR:</span>
    <el-color-picker v-model="background" @change="onBackground" />
  </div>
</template>

<style lang="less" scoped>
@import url("./base.less");

.n-tip {
  font-size: 12px;
  margin: 10px 0 4px;
}

.t-all {
  background: #f0f0f0;
  padding: 8px;
}
</style>